{% extends 'base.html' %}

{% block head %}
<style>
    .index-leftside {
        text-align: left;
        padding-left: 30px;
        margin-bottom: 5px;
    }

    .article-list-item {
        display: flex;
        /*align-items: center;*/
        gap: 24px;
    }

    .article-list-item .summary {
        flex: 1;
        min-width: 0;
        text-align: justify;
    }

    .article-list-item .thumbnail {
        width: 120px;
        max-width: 120px;
        max-height: 90px;
        flex-shrink: 0;
        align-content: center;
    }
    .article-list-item .thumbnail img {
            width: 100%;
            height: 100%;
            /*height: auto;*/
            border-radius: 4px;
            object-fit: cover;
        }
</style>
{% endblock head %}

{% block bodyMiddle %}
<!--正文左侧-->
{% include 'include/index_left.html' %}


<!--中间文章-->
<div class="col-sm-7 col-12" style="margin-bottom: 40px">

    <!--文章列表-->
    <div class="article-list article-panel" style="margin-right: 10px">

        {% for article,user in result %}
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/{{article.articleid}}">
                    <span>{{article.headline}}</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/{{article.articleid}}">
                        {{article.content | striptags | mytruncate(120)}}
                    </a>
                </div>
                {% if article.thumbnail is not none and article.thumbnail|length>0 %}
                <div class="thumbnail">
                    <img src="/upload/thumb/{{article.thumbnail}}" alt=" "/>
                </div>
                {% endif %}
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">{{article.createtime}}</span>
                <span data-post-id="18985468" class="post-bottom-info">{{user.nickname}}</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：{{article_type[article.type | string]}}</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读({{article.readcount}})</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        {% endfor %}
        <!--分页-->
        <div class="col-12" style="margin-top: 40px">
            <nav aria-label="Page navigation example">
                <ul class="pagination page">
                    {% if page==1 %}
                    <!--<li class="page-item"><a class="page-link" href="#">上一页</a></li>-->
                    {% else %}
                    <li class="page-item"><a class="page-link" href="/page/{{page-1}}">上一页</a></li>
                    {% endif %}
                    {% for i in range(pagecount) %}
                    <li class="page-item"><a class="page-link" href="/page/{{i+1}}">{{i+1}}</a></li>
                    {% endfor %}
                    {% if page==pagecount %}
                    <!--<li class="page-item"><a class="page-link" href="#">下一页</a></li>-->
                    {% else %}
                    <li class="page-item"><a class="page-link" href="/page/{{page+1}}">下一页</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>

</div>

<!--子页面-->
{% include 'include/side_vue.html' %}

{% endblock bodyMiddle %}